import {Link} from 'react-router-dom';
// 定义的公共样式常量
const FAVORITED_CLASS = 'btn btn-sm btn-primary';
const NOT_FAVORITED_CLASS = 'btn btn-sm btn-outline-primary';



export default function ArticleItem({article}) {
    const {author, createdAt, tags,slug,title,description} = article
    return (
        <div className="article-preview">
            <div className='article-meta'>
                {/* 作者信息 */}
                <div className='info'>
                    <Link to={`/profile/${author && author.username}`}>
                        <img
                            src={author && author.avatar}
                            alt={author && author.usernmae}/>
                    </Link>
                </div>
                <div className='info'>
                    <Link to={`/profile/${author && author.username}`}>
                        {author && author.username}
                    </Link>
                    {"  "}
                    {/* 创建时间 */}
                    <span>
                        {new Date(createdAt).toLocaleDateString()}
                    </span>
                    {/* 喜欢信息*/}

                </div>
                <div className="pull-xs-right">
                    <span className={article.favorited ? FAVORITED_CLASS : NOT_FAVORITED_CLASS}>
                        <i className="fa fa-heart-o"></i> {article.favoriteCount}
                    </span>
                </div>
                {/* 文章介绍 */}
                <Link to={`/article/${slug}`} className="preview-link">
                    <h5>{title}</h5>
                    <p>{description}</p>
                    <span>阅读更多...</span>
                    {
                        tags.map(tag => {
                            return (
                                <li className='tag-default tag-pill tag-outline' key={tag}>
                                    {tag}
                                </li>
                            )
                        })
                    }

                </Link>
            </div>
        </div>
    )
}